<template>
    <div>
        首页
        <hr> 
        <h3>状态数据测试</h3>
        <!-- 进入页面获取之后，是否会实时更新？ -->
        <p>created获取到的值：{{value}}</p>
        <!-- 使用computed计算得到的数据 -->
        <p>computed获取的数据：{{token}}</p>
        <p>
            <button @click="changeToken">更新按钮</button>
            <button @click="asyncChangeToken">异步更新按钮</button>
        </p>
        <hr>
        <button @click="logoutEvt">退出</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: ''
            }
        },

        created() {
            this.value = this.$store.getters['common/getToken']
        },

        computed: {
            token() {
                return this.$store.getters['common/getToken']
            }
        },

        methods: {
            logoutEvt() {
                // 清除路由拦截标识，然后再退出到登录界面
                sessionStorage.clear()
                this.$router.push('/login')
            },

            changeToken() {
                // 直接调用commit方法
                this.$store.commit('common/setToken', Math.random())
            },

            asyncChangeToken() {
                // 调用异步action方法
                this.$store.dispatch('common/tokenAct', Math.random())
            }
        }
    }
</script>